<template>
  <div class="tools">
    <Header class="head-nft-creator" />
    <div class="tools__theme">
      <div class="wrapper">
        <ChainList :chain-code="chainCode" @select="select" />
      </div>
    </div>
    <div class="tools__main">
      <div class="gas-form">
        <div class="gas-form__title">
          <span>{{ chainName }} Gas Price Last (GWEI)</span>
        </div>
        <div class="gas-form__summary">
          <span>Last update 2023-05-07 19:52:21</span>
        </div>
        <div class="gas-form__list">
          <div class="gas-form__item" v-for="(item, i) in list" :key="i">
            <div class="background">
              <div class="bg">
                <img :src="item.background" />
              </div>
              <div
                class="icon"
                :class="{
                  fast: item.level === 'fast',
                  normal: item.level === 'normal',
                  slow: item.level === 'slow',
                }"
              >
                <img :src="item.icon" />
              </div>
            </div>
            <div class="summary">
              <span class="summary__level">{{ item.level }}</span>
              <div class="summary__base">
                <span>{{ item.gasFee.base }}</span>
              </div>
              <div class="summary__priority">
                <span class="label">Priority Fee</span>
                <span class="value">{{ item.gasFee.priority }}</span>
              </div>
              <div class="summary__max">
                <span class="label">Max Fee</span>
                <span class="value">{{ item.gasFee.max }}</span>
              </div>
              <div class="summary__speed">
                <span class="value">{{ item.speed }}</span>
                <span class="label">Second</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import ChainList from "@/components/ChainList";
import ImgFast from "@/assets/gas/fast.png";
import ImgNormal from "@/assets/gas/normal.png";
import ImgSlow from "@/assets/gas/slow.png";
import IconFast from "@/assets/gas/fast.svg";
import IconNormal from "@/assets/gas/normal.svg";
import IconSlow from "@/assets/gas/slow.svg";

export default {
  components: {
    Header,
    ChainList,
  },
  data() {
    return {
      chainCode: "ethereum",
      chainName: "Ethereum",
      list: [
        {
          level: "fast",
          gasFee: {
            base: "84.8",
            priority: "0.70",
            max: "135",
            usd: 3.4,
          },
          background: ImgFast,
          icon: IconFast,
          speed: 15,
        },
        {
          level: "normal",
          gasFee: {
            base: "81.8",
            priority: "0.70",
            max: "135",
            usd: 3.4,
          },
          background: ImgNormal,
          icon: IconNormal,
          speed: 15,
        },
        {
          level: "slow",
          gasFee: {
            base: "80.2",
            priority: "0.70",
            max: "135",
            usd: 3.4,
          },
          background: ImgSlow,
          icon: IconSlow,
          speed: 15,
        },
      ],
    };
  },
  methods: {
    select(val) {
      const { chainCode, chainName } = val;
      this.chainCode = chainCode;
      this.chainName = chainName;
    },
  },
};
</script>

<style lang="scss" scoped>
.tools {
  position: relative;
  width: 100vw;
  display: flex;
  background-color: #14161a;

  &__main {
    height: 100vh;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  .wrapper {
    padding-top: 72px;
    height: 100vh;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
  }
}
.gas-form {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;

  &__title {
    span {
      font-size: 32px;
      font-family: "Roboto Bold";
      text-transform: capitalize;
      color: var(--color);
    }
  }
  &__summary {
    margin: 30px 0 60px;
    span {
      font-size: 16px;
      color: var(--color-content);
    }
  }
  &__list {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  &__item {
    width: 280px;
    position: relative;

    .background {
      position: relative;
      .bg {
        img {
          width: 280px;
        }
      }
      .icon {
        position: absolute;
        right: 0;
        top: 77px;
        width: 28px;
        height: 60px;
        /* background: rgba(0, 0, 0, 0.1); */
        text-align: center;
        overflow: hidden;
        img {
          width: 20px;
        }

        &.fast {
          img {
            animation: icon-ani 1.8s linear 0s infinite;
          }
        }

        &.normal {
          img {
            transform: translateY(100%);
          }
        }

        &.slow {
          img {
            animation: icon-ani 6s linear 0s infinite;
          }
        }
      }
    }

    .summary {
      position: absolute;
      z-index: 2;
      left: 20px;
      top: 0;
      width: 216px;

      display: flex;
      align-items: center;
      flex-direction: column;

      &__level {
        margin-top: 20px;
        font-size: 24px;
        font-family: "Roboto Bold";
        text-transform: capitalize;
      }

      &__base {
        background: rgba(0, 0, 0, 0.08);
        width: 156px;
        height: 92px;
        border-radius: 10px;
        margin: 15px 0;

        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: 56px;
          font-family: "Roboto Bold";
        }
      }

      &__priority,
      &__max,
      &__speed,
      &__usd {
        line-height: 32px;

        .value {
          font-size: 16px;
          color: var(--color);
          font-family: "Roboto Medium";
          margin: 0 6px;
        }

        .label {
          font-size: 14px;
          color: var(--color-content);
        }
      }
    }
  }
}

@keyframes icon-ani {
  from {
    transform: translateY(300%);
  }
  to {
    transform: translateY(-100%);
  }
}
</style>
